<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--插值表达式
          js===>dom
          dom==>js  数据的双向绑定
          v-model="message": 得到message的值，并且把表单的值赋值给message
         -->
        {{message}}
        {{[1,2,3,4][2]}}
        {{{"name":"张三","age":18}.name}}

        <!--
            v-html="message"  变量的值赋值给dom，并且能当成html标签解析

            v-text="message"  变量的值赋值给dom，并且能当成普通文本解析
        -->
        <h1 v-html="htmlMessage"></h1>
        <h1 v-text="htmlMessage"></h1>

        <!-- v-once  解析一次  后期数据变更不解析-->
        <h1 v-once>
            {{message}}
            {{htmlMessage}}
        </h1>

        <!--调用函数需要小括号-->
        {{sayHello()}}

    </div>
    {{message}}


    <script>
       // document.getElementById("app").innerHtml="";

        //1,构建Vue实例
        var app =  new Vue({
            el:"#app",//容器的id  vue对象的作用访问
            data:{ //定义数据
                message:"helloworld!!",
                htmlMessage:"<a href=''>测试</a>"
            },
            methods:{
                sayHello(){
                    return "函数返回的hello";
                }
            }
        });

    </script>

</body>
</html>